<template>
  <div class="check-box" >
    
    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div class="option">
      <el-checkbox v-for="(item, index) in question.options" :label="item.id" :model-value="item.isChoosed" class="box">
        <span style="font-size: 16px; font-weight:bold margin-left:10px">{{item.text}}</span>
        <span class="description">{{showDescription(item.description)}}</span>
      </el-checkbox>
    </div>
    <div v-if="question.qtype == 'exam'">
      <el-alert v-if="isCorrect()"
        :title="'回答正确（+'+question.grade+'分）'"
        type="success"
        :closable="false"
        class="result"
        
        show-icon>
      </el-alert>
      <div v-else>
        <el-alert 
        title="回答错误（+0分）"
        type="error"
        :closable="false"
        class="result"
        show-icon>
        </el-alert>
        <el-alert
          title="正确答案"
          type="success"
          :description="getCorrectAnswer()"
          class="result"
          :closable="false">
        </el-alert>
      </div>    
      <el-alert v-if="question.resolution != '' && question.resolution != null"
        title="答案解析"
        type="info"
        :description="question.resolution"
        class="result"
        :closable="false">
      </el-alert>  
    </div>   
  </div>
</template>

<script>
import Title from './Title.vue'

export default {
  name:'CheckBox',
  components: {
    Title,
  },
  data(){
   return {
     
   }
  },
  props: {
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
  },
  mounted() {
    // this.getCheckBox()
  },
  methods: {
    select() {
      this.question.answer = this.checkList
      this.$emit('changeCheckBox', this.question)
    },
    showDescription(description) {
      if(description == '' || description == null) {
        return ''
      }else {
        return '('+description+')'
      }
    },
    isCorrect() {
      let correct = true
      for(let option of this.question.options) {
        if(option.isCorrect != option.isChoosed) {
          correct = false
        }
      }
      return correct
    },
    getCorrectAnswer() {
      let checkList = '| '
      for(let option of this.question.options) {
        if(option.isCorrect) {
          checkList += option.text + ' | '
        }
      }
      return checkList
    }
  },
}
</script>

<style scoped src='assets/css/fillcss/checkbox.css'>
  /* @import url('../css/checkbox.css'); */
</style>
